<template>
    <div class="dining">
        <div class="dining-box">
            <div class="bread1">
                <div class="tags">
                    <span>推荐</span>
                </div>
                <ul class="list-ul">
                    <li class="btm" v-for="(dining,index) in dinings" :key="index">
                        <div class="img">
                            <router-link :to="`/cate/${dining.shopId}`">
                                <div class="imgbox">
                                    <img :src="dining.shopCover" alt="餐厅图片">
                                </div>
                            </router-link>
                        </div>
                        <div class="info">
                            <router-link :to="`/cate/${dining.shopId}`" class='info-a'>
                                <h4>{{dining.shopName}}</h4>
                                <div class="source">
                                    <p>
                                        <el-rate
                                            :value="dining.shopMark"
                                            disabled
                                            show-score
                                            text-color="#ff9900"
                                        >
                                        </el-rate>
                                    </p>
                                </div>
                                <p class="desc">
                                    地址：<span class='address'>{{dining.shopLocation}}</span>
                                </p>
                                <p class="desc">
                                    电话：{{dining.shopPhone}}
                                </p>
                            </router-link>
                            <div class="other">
                               <button class='appointment' @click="appoint(dining.shopId)">预约</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 右边地图 -->
            <div id="container3">
                <a href="javascript:;">
                    <div style="width:98%;height:240px;border:#ccc solid 1px;" id="dituContent"></div>
                    <div class="text-wrap">
                        <div class="date"></div>
                        <div class="desc"></div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
// import cookie from '../../cookie/index';
// import jwtDecode from 'jwt-decode'
import {store,point} from "../../../api/commonReq/front/ding/data"
export default {
    name:'Dining1',
    data() {
        return {
            dinings:null,
            tags:null,
            userId:'',
            time:'',
            way:'',
            address:'',
            rules:{
                time: [
                    { required: true, message: '请输入预约时间', trigger: 'blur' },
                    { message: '请输入具体时间段(2022-2-25-18:00)', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择预约方式', trigger: 'change' }
                ],
            }
           
        }
    },
    mounted() {
        this.userId = this.$store.state.store.userMsg.userId
        // this.userId = jwtDecode(cookie.getToken()).userId
        this.initMap()
        store({
            labelId:this.$route.params.tag
        }).then(data=>{
            this.dinings = data.data.data
            this.address = data.data.data[0].shopLocation
            if (this.address != undefined && this.address != '') {
                var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address=' + encodeURIComponent(this.address);  
                console.log(url);              
                this.$http({
                    type: "POST",
                    url: url,
                    dataType: "JSONP",
                })
                .then(function (data) {
                    if (parseInt(data.status) == 0) {
                        console.log(data.result.location.lng);
                        console.log(data.result.location.lat);
                        // $("#lng").html("经度：" + data.result.location.lng);
                        // $("#lat").html("纬度：" + data.result.location.lat);
                    }
                })
                .catch(function(error){
                    console.log(error);
                })     
            }
        })
        .catch(err => {
            console.log(err);
        })
        
    },
    // created(){
    //     this.x.$on('bigData',(data)=>{
    //         console.log('我是ding组件',data);
    //     })
    // },
    methods: {  
        // 遍历数据
        
        // showHotel1(){
        //     this.$http({
        //         url:'/shops/home/tag/showShopByLabel',
        //         method:'get',                
        //         params:{
        //             labelId:this.$route.params.tag
        //         }
        //     }).then(data => {             
        //         this.dinings = data.data.data
        //         this.address = data.data.data[0].shopLocation
        //         console.log(this.address);
        //         //根据地点名称获取经纬度信息
        //           // traverse(){
        //         if (this.address != undefined && this.address != '') {
        //             console.log(1151151151115);
        //             console.log(this.address);
        //             var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address=' + encodeURIComponent(this.address);  
        //             console.log(url);              
        //             this.$http({
        //                 type: "POST",
        //                 url: url,
        //                 dataType: "JSONP",
        //             })
        //             .then(function (data) {
        //                 console.log(122122122122122);
        //                     if (parseInt(data.status) == 0) {
        //                         console.log(210210210);
        //                         console.log(data.result.location.lng);
        //                         console.log(data.result.location.lat);
        //                         // $("#lng").html("经度：" + data.result.location.lng);
        //                         // $("#lat").html("纬度：" + data.result.location.lat);
        //                     }
        //                 })
        //             .catch(function(error){
        //                 console.log(error);
        //             })     
        //         }
        //     }).catch(err => {
        //         console.log(err);
        //     })
        // },
        // 预约店铺
        appoint(a){                             
            this.$confirm('<strong :rules="rules"><div style="margin-bottom:14px" prop="time">预约时间：<input  v-model="time" style="outline:none;height:30px;font-size:13px;border:1px solid #409EFF" placeholder="预约的时间"></div><div prop="way">预约方式：<select v-model="way" style="outline:none;height:30px;font-size:13px;border:1px solid #409EFF;width:160px"><option value="到店服务">到店服务</option><option value ="上门服务">上门服务</option></select></div><div style="display:none">商铺id：<input></div></strong>', '预约店铺', {
                dangerouslyUseHTMLString: true,
                distinguishCancelAndClose: true,
                confirmButtonText: '提交',
                cancelButtonText: '放弃预约'
            })
            .then(() => {
                point({
                    appointTimeslot:'2022-6-20 10:00-12:00',
                    appointWay:'上门服务',
                    shopId:a,
                    userId:this.userId
                }).then(data=>{
                    if(data.data.code === 199){
                        this.$message({
                            message:data.data.message,
                            type:'warning',
                            center:true
                        })
                    }else{
                        this.$message({
                            type: 'info',
                            message: '已提交,等待审核'
                        });
                        // this.ruleForm.time='';
                        // this.ruleForm.region='';
                        // this.ruleForm.shopUser=''; 
                    }
                }).catch(error => {
                    console.log(error);
                })  
                // this.$http({
                //     url:'/shops/user/appoint/addAppoint',
                //     method:'post',
                //     headers:{
                //         'Authorization':cookie.getToken()
                //     },
                //     params:{
                //         // appointTimeslot:this.time,
                //         // appointWay:this.way,
                        // appointTimeslot:'2022-6-20 10:00-12:00',
                        // appointWay:'上门服务',
                        // shopId:a,
                        // userId:this.userId
                //     }
                // })
                // .then(data => {
                    // if(data.data.code === 199){
                    //     this.$message({
                    //         message:data.data.message,
                    //         type:'warning',
                    //         center:true
                    //     })
                    // }else{
                    //     this.$message({
                    //         type: 'info',
                    //         message: '已提交,等待审核'
                    //     });
                    //     // this.ruleForm.time='';
                    //     // this.ruleForm.region='';
                    //     // this.ruleForm.shopUser=''; 
                    // }
                // })
                // .catch(error => {
                //     console.log(error);
                // })                      
            })
            .catch(action => {
                this.$message({
                    type: 'info',
                    message: action === 'cancel'
                        ? '放弃预约'
                        : '停留在当前页面'
                })
            });
        },
        initMap(){
            this.createMap();  //创建地图
            this.setMapEvent();  //设置地图事件
            this.addMapControl();  //向地图添加控件
            // this.traverse();  //将地址转化为经纬度
        },
        // 创建函数地图
        createMap(){
            var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
            var point = new BMap.Point(113.92,35.282);//定义一个中心点坐标
            map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
            window.map = map;//将map变量存储在全局
        },

        //地图时间创建函数
        setMapEvent(){
            map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
            map.enableScrollWheelZoom();//启用地图滚轮放大缩小
            map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
            map.enableKeyboard();//启用键盘上下左右键移动地图
        },

        //地图控件添加函数
        addMapControl(){
            //向地图中添加缩放控件
            var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
            map.addControl(ctrl_nav);
                //向地图中添加缩略图控件
            var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
            map.addControl(ctrl_ove);
                //向地图中添加比例尺控件
            var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
            map.addControl(ctrl_sca);
        },
            // 将地址转换成经纬度
        // traverse(){
        //     console.log(this.address);
        //     console.log(205205205205);
        //     if (this.address != undefined && this.address != '') {
        //         var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address=' + encodeURIComponent(address);
        //         //根据地点名称获取经纬度信息
        //         $.ajax({
        //             type: "POST",
        //             url: url,
        //             dataType: "JSONP",
        //             success: function (data) {
        //                 if (parseInt(data.status) == 0) {
        //                     console.log(210210210);
        //                     console.log(data.result.location.lng);
        //                     console.log(data.result.location.lat);
        //                     // $("#lng").html("经度：" + data.result.location.lng);
        //                     // $("#lat").html("纬度：" + data.result.location.lat);
        //                 }
        //             }
        //         });
        //     }
        //     // var address = $.trim($('#address').val());
        //     // if (address != undefined && address != '') {
        //     //     var url = 'http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&address=' + encodeURIComponent(address);
        //     //     //根据地点名称获取经纬度信息
        //     //     $.ajax({
        //     //         type: "POST",
        //     //         url: url,
        //     //         dataType: "JSONP",
        //     //         success: function (data) {
        //     //             if (parseInt(data.status) == 0) {
        //     //                 console.log(210210210);
        //     //                 console.log(data.result.location.lng);
        //     //                 console.log(data.result.location.lat);
        //     //                 // $("#lng").html("经度：" + data.result.location.lng);
        //     //                 // $("#lat").html("纬度：" + data.result.location.lat);
        //     //             }
        //     //         }
        //     //     });
        //     // }
        // }   
    },   
}
</script>
<style lang="less" scoped>
    .dining{
        width: 100%;
       position: absolute;
       .dining-box{
           width: 1260px;
           margin: 0 auto;
           display: flex;
        // 左边
        .bread1{
            margin-left: 30px;
            width: 60%;
            margin-top: 20px;
            padding: 15px 20px 21px 20px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #e5e5e5;
            color: #666;
            .tags{
                padding-bottom: 13px;
                font-size: 20px;
                line-height: 20px;
                border-bottom: 1px solid #e5e5e5;
                text-align: left;
                span{
                    font-weight: 400;
                }
            }
            .list-ul{
                list-style: none;
                display: flex;
                flex-direction: column;
                .btm{
                    position: relative;
                    border-bottom: 1px solid #e5e5e5 !important;
                    padding-bottom: 18px;
                    margin-top: 20px;
                    .img{ 
                        width: 220px;
                        height: 125px;
                        float: left;
                        border-radius: 4px;
                        position: relative;
                        overflow: hidden;
                        .imgbox{
                            width: 220px;
                            height: 125px;
                            img{
                                width: 100%;
                                height: 100%;
                                &:hover{
                                    cursor: pointer;
                                    transition: transform .5s ease-out;
                                    transform: scale(1.2);
                                    overflow: hidden;
                                } 
                            }
                        }
                    }
                    .info{
                        padding: 4px 0 0 20px;
                        font-size: 12px;
                        float: left;
                        width: 60%;
                        text-align: left;
                        .info-a{
                            text-decoration: none;
                            cursor: pointer;
                            color: #222;
                            h4{
                                font-size: 16px;
                                line-height: 22px;
                                color: #222;
                            }
                            .source{
                                padding: 6px 0 0 0;
                                height: 17px;
                                line-height: 13px;
                            }
                            .desc{
                                line-height: 17px;
                                color: #666;
                                padding-top: 7px;
                                margin-bottom: 11px;
                            }
                        }
                    }
                    .other{
                        border-top: 1px #e5e5e5 dashed;
                        padding: 16px 0 0 0;
                       .appointment{
                           background-color: #007bff;
                           color: white;
                           padding: 10px 15px;
                           outline: none;
                           border: 1px solid #007bff;
                           border-radius: 5px;
                           &:hover{
                               cursor: pointer;
                               background-color: #3177BE;
                               border: 1px solid #3177BE;
                           }
                       }
                    }
                }
            }
        }
        // 右边地图
        #container3{
            width: 35%;
            margin-left: 20px;
            margin-top: 23px;
        }
    }
}
</style>